"use client"

import { Card, Descriptions, DescriptionsProps, Modal, Tabs, TabsProps, Tooltip } from "antd";
import { useEffect, useState } from "react";
import SecondView from "./second";
import YearView from "./year";
import WeekView from "./week";
import MonthView from "./month";
import DayView from "./day";
import HourView from "./hour";
import MinuteView from "./minute";
import PopupResult from "./result";

// 定义配置选项的类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    cronValue: string;
    OnCanCle: () => void;
    onOk: (e: any) => void;

}
type cronObjectValueType = {
    second: string;
    min: string;
    hour: string;
    day: string;
    month: string;
    week: string;
    year: string;
};

const CrontabView: React.FC<MyComponentProps> = (props) => {

    const tabTitles = ["秒", "分钟", "小时", "日", "月", "周", "年"]
    const [cronExpression, setCronExpression] = useState<string>("");
    const [cronObjectValue, setCronObjectValue] = useState<cronObjectValueType>({
        second: "*",
        min: "*",
        hour: "*",
        day: "*",
        month: "*",
        week: "?",
        year: "",
    });
    useEffect(() => {
        if (props.cronValue) {
            const arr = props.cronValue.split(/\s+/)
            if (arr.length >= 6) {
                //6 位以上是合法表达式
                let obj = {
                    second: arr[0],
                    min: arr[1],
                    hour: arr[2],
                    day: arr[3],
                    month: arr[4],
                    week: arr[5],
                    year: arr[6] ? arr[6] : ""
                }
                setCronObjectValue(() => ({
                    ...obj
                }))
            }
        }
    }, [props.cronValue])
    useEffect(() => {
        const obj = cronObjectValue
        setCronExpression(obj.second
            + " "
            + obj.min
            + " "
            + obj.hour
            + " "
            + obj.day
            + " "
            + obj.month
            + " "
            + obj.week
            + (obj.year === "" ? "" : " " + obj.year))
    }, [cronObjectValue])

    const items: TabsProps['items'] = [
        {
            key: 'second',
            label: '秒',
            children: (<SecondView cronValue={cronObjectValue.second} cronType={'second'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
        {
            key: 'min',
            label: '分',
            children: (<MinuteView cronValue={cronObjectValue.min} cronType={'min'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
        {
            key: 'hour',
            label: '时',
            children: (<HourView cronValue={cronObjectValue.hour} cronType={'hour'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
        {
            key: 'day',
            label: '日',
            children: (<DayView cronValue={cronObjectValue.day} cronType={'day'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
        {
            key: 'month',
            label: '月',
            children: (<MonthView cronValue={cronObjectValue.month} cronType={'month'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
        {
            key: 'week',
            label: '周',
            children: (<WeekView cronValue={cronObjectValue.week} cronType={'week'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
        {
            key: 'year',
            label: '年',
            children: (<YearView cronValue={cronObjectValue.year} cronType={'year'} updateCron={(cornType: string, value: string) => { handleChangeCron(cornType, value) }} />),
        },
    ];
    const handleChangeCron = (cornType: string, value: string) => {
        const objValue = {
            [cornType]: value
        }
        if (cornType == 'day') {
            if (value == '?') {
                objValue.week = "*"
            } else {
                objValue.week = "?"
            }
        }
        if (cornType == 'week') {
            if (value == '?') {
                objValue.day = "*"
            } else {
                objValue.day = "?"
            }
        }
        setCronObjectValue((pre) => ({
            ...pre,
            ...objValue,
        }))
    }

    // 渲染表格单元格内容，处理长文本显示
    const renderCellContent = (value: string, key: string) => {
        if (value.length < 10) {
            return <span>{value}</span>;
        } else {
            return (
                <Tooltip title={value} placement="top">
                    <span>{value.substring(0, 8)}...</span>
                </Tooltip>
            );
        }
    };
    const DescriptionsTtems: DescriptionsProps['items'] = [
        {
            key: '1',
            label: '秒',
            span: 1,
            children: renderCellContent(cronObjectValue.second, 'second'),
        },
        {
            key: '2',
            label: '分钟',
            span: 1,
            children: renderCellContent(cronObjectValue.min, 'min'),

        },
        {
            key: '3',
            label: '小时',
            span: 1,
            children: renderCellContent(cronObjectValue.hour, 'hour'),
        },
        {
            key: '4',
            label: '日',
            span: 1,
            children: renderCellContent(cronObjectValue.day, 'day'),
        },
        {
            key: '5',
            label: '月',
            span: 1,
            children: renderCellContent(cronObjectValue.month, 'month'),
        },
        {
            key: '6',
            label: '周',
            span: 1,
            children: renderCellContent(cronObjectValue.week, 'week'),
        },
        {
            key: '7',
            label: '年',
            span: 1,
            children: renderCellContent(cronObjectValue.year, 'year'),
        },
        {
            key: '8',
            label: 'Cron 表达式',
            span: 1,
            children: <div>{cronExpression}</div>,
        },

    ];

    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                styles={{ body: { maxHeight: "75vh", overflowY: "auto" } }}
                onOk={() => {
                    props.onOk(cronExpression)
                }}
                onCancel={() => {
                    props.OnCanCle()
                }}
                width={800}>
                <Card extra={null} style={{ width: "100%", marginBottom: 10 }}>
                    <Tabs type="card" defaultActiveKey="1" items={items} />
                </Card>
                <Card extra={null} style={{ width: "100%", marginBottom: 10 }}>
                    <div className=" w-full">
                        <Descriptions column={8} title="时间表达式" layout="vertical" bordered items={DescriptionsTtems}></Descriptions>

                    </div>
                </Card>

                <PopupResult ex={cronExpression}></PopupResult>
            </Modal>
        </>);
};

export default CrontabView;
